<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script>
    /* 
      Promise实例.then()返回的是一个新的Promise实例，它的值和状态由什么决定
        1.简单表达：由then()所指定的回调函数执行的结果决定
        2.详细表达
          1.如果then所指的的回调返回的是非Promise值a:
             那么新Promise实例状态为：成功，成功的value为a
          2.如果then所指的的回调返回的是Promise实例p:
            那么新Promise实例的状态，值，都与p一直
          3.如果then所指定的回调抛出异常
            那么新Promise的状态为rejected,reason为抛出的那个异常
    */
    function sendAjax(url, data) {
      const p = new Promise((resolve, reject) => {
        // 实例xhr
        const xhr = new XMLHttpRequest()
        // 绑定监听
        xhr.onreadystatechange = () => {
          if (xhr.readyState == 4) {
            if(xhr.status >= 200 && xhr.status < 300) resolve(xhr.response);
            else reject('请求出了点问题');
          }
        }
        // 整理参数
        let str;
        for(let key in data) {
          str += `${key}=${data[key]}`
        }
        str = str.slice(0, -1)
        xhr.open('GET',url + '?' + str)
        xhr.responseType = 'json'
        xhr.send()
      })
      return p
    }
    // 因为是主线程的代码所以这里输出的x的promise还是pending,因为它先执行的
    // 所以我们不要直接打印Promise，因为promise是异步调用的
    
    sendAjax("https://www.baidu.com", {page:1}).then(
      res => {return sendAjax("https://www.baidu.com", {page:1});}, // 返回的是一个Promise值
      err => {console.log('failed',err);}
    )
  </script>
</body>
</html>